<template>
  <div class="dashboard-container">
    <div class="header">
      <h2>订单状态</h2>
      <h2>支付方式</h2>
    </div>

    <div class="content">
      <!-- 左侧订单状态卡片 -->
      <div class="status-cards">
        <el-card
          v-for="(item, index) in statusData"
          :key="index"
          class="status-card"
          :style="{ borderTop: `4px solid ${item.color}` }"
        >
          <div class="card-content">
            <div class="title">{{ item.status }}</div>
            <div class="value">{{ item.value }}</div>
            <div class="unit">{{ item.unit }}</div>
          </div>
        </el-card>
      </div>

      <!-- 右侧支付方式饼图 -->
      <div class="payment-chart">
        <div ref="chartRef" style="width: 100%; height: 300px;"></div>
        <div class="payment-legend">
          <div v-for="(item, index) in paymentData" :key="index" class="legend-item">
            <span class="dot" :style="{ backgroundColor: item.color }"></span>
            <span>{{ item.name }} {{ item.percentage }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 订单状态数据
const statusData = ref([
  { status: '待发货', value: '12', unit: '本单', color: '#FF9A2E' },
  { status: '已发货', value: '1,268', unit: '单', color: '#7FBC39' },
  { status: '售后', value: '3', unit: '站', color: '#FF5757' },
  { status: '已完成', value: '1,268', unit: '单', color: '#2E95FF' }
])

// 支付方式数据
const paymentData = ref([
  { name: '支付宝', value: 62, color: '#1890FF', percentage: '62%' },
  { name: '微信', value: 38, color: '#13CE66', percentage: '38%' }
])

const chartRef = ref<HTMLElement>()

onMounted(() => {
  if (chartRef.value) {
    const chart = echarts.init(chartRef.value)

    const option = {
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '支付方式',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: paymentData.value.map(item => ({
            value: item.value,
            name: item.name,
            itemStyle: { color: item.color }
          }))
        }
      ]
    }

    chart.setOption(option)

    // 响应式调整
    window.addEventListener('resize', () => chart.resize())
  }
})
</script>

<style scoped>
.dashboard-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.header h2 {
  font-size: 18px;
  color: #333;
}

.content {
  display: flex;
  gap: 20px;
}

.status-cards {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.status-card {
  cursor: pointer;
  transition: all 0.3s;
}

.status-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.card-content {
  padding: 16px;
  text-align: center;
}

.card-content .title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.card-content .value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.card-content .unit {
  font-size: 12px;
  color: #999;
}

.payment-chart {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.payment-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}


</style>
